﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--[if IE 8 ]>
<html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>
    <!-- Basic Page Needs -->
    <meta charset="UTF-8">
    <!--[if IE]>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
    <title>Techno Store - Single Product 04</title>

    <meta name="author" content="CreativeLayers">

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Boostrap style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

    <!-- Theme style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">

    <!-- Reponsive -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/responsive.css">

    <link rel="shortcut icon" href="/favicon/favicon.png">

</head>
<body class="header_sticky">
<div class="boxed">

    <div class="overlay"></div>

    <!-- Preloader -->
    <div class="preloader">
        <div class="clear-loading loading-effect-2">
            <span></span>
        </div>
    </div><!-- /.preloader -->


    <div th:insert="~{header :: #header}"></div>

    <section class="flat-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="breadcrumbs">
                        <li class="trail-item">
                            <a href="/page/index" title="">首页</a>
                            <span><img src="/images/icons/arrow-right.png" alt=""></span>
                        </li>
                        <li class="trail-item">
                            <a href="/page/food" title="">食材</a>
                            <span><img src="/images/icons/arrow-right.png" alt=""></span>
                        </li>
                        <li class="trail-end">
                            <a  title="">食材明细</a>
                        </li>
                    </ul><!-- /.breacrumbs -->
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-breadcrumb -->

    <section class="flat-product-detail">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="flexslider">
                        <ul class="slides">
                            <li data-thumb="/images/product/flexslider/thumb/2.jpg">
                                <img style="width: 555px;height: 480px;" th:src="'http://47.94.10.67/images/' + ${food.imgUrl}" alt="image flexslider"/>
                            </li>

                        </ul><!-- /.slides -->
                    </div><!-- /.flexslider -->
                </div><!-- /.col-md-6 -->
                <div class="col-md-6">
                    <div class="product-detail style4">
                        <div class="header-detail">
                            <input type="hidden" id="foodId" th:value="${food.id}">
                            <h4 class="name" th:text="${food.foodName}"></h4>
                            <div class="reviewed">
                                <div class="review">
                                    <div class="queue">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                    </div>
                                </div>
                                <div class="status-product">有货 </span>
                                </div>
                            </div><!-- /.reviewed -->
                        </div><!-- /.header-detail -->
                        <div class="content-detail">
                            <div class="price">
                                <div class="regular" th:text="'原价：'+${food.oldPrice} + '元'">
                                    $ 2,999.00
                                </div>
                                <div class="sale" th:text="'现价：'+${food.nowPrice} + '元'">
                                    $ 1,999.00
                               </div>
                            </div>
                            <div class="info-text" th:text="${food.introduce}"></div>

                        </div><!-- /.content-detail -->
                        <div class="footer-detail">
                            <div class="quanlity-box">

                                <div class="quanlity">
                                    <span class="btn-down" id="sub"></span>
                                    <input type="text" name="number" id="quantity" value="1" min="1" max="100"
                                           placeholder="Quanlity">
                                    <span class="btn-up" id="add"></span>
                                </div>
                            </div><!-- /.quanlity-box -->
                            <div class="box-cart style2">
                                <div class="btn-add-cart">
                                    <a id="addCart" title="">
                                        <img src="/images/icons/add-cart.png" alt="">添加到购物车</a>
                                </div>

                            </div><!-- /.box-cart style2 -->
                            <div class="social-single">
                                <span><font style="vertical-align: inherit;"><font
                                        style="vertical-align: inherit;">分享</font></font></span>
                                <ul class="social-list style2">
                                    <li>
                                        <a href="#" title="">
                                            <i class="fa fa-facebook" aria-hidden="true"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" title="">
                                            <i class="fa fa-twitter" aria-hidden="true"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" title="">
                                            <i class="fa fa-instagram" aria-hidden="true"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" title="">
                                            <i class="fa fa-pinterest" aria-hidden="true"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" title="">
                                            <i class="fa fa-dribbble" aria-hidden="true"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" title="">
                                            <i class="fa fa-google" aria-hidden="true"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div><!-- /.social-single -->
                        </div><!-- /.footer-detail -->
                    </div>
                </div><!-- /.col-md-6 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-product-detail -->

    <section class="flat-product-content">
        <ul class="product-detail-bar">
            <li class="active">食材描述</li>
            <li>食材详情</li>

        </ul><!-- /.product-detail-bar -->
        <div class="container">
            <div class="row">
                <span th:text="${food.detail}"></span>

            </div><!-- /.row -->
            <div class="row" style="display: none;">
                <div class="col-md-12">
                    <div class="tecnical-specs">
                        <h4 class="name" th:text="${food.foodName}">
                        </h4>
                        <table>
                            <tbody>
                            <tr>
                                <td>长度</td>
                                <td th:text="${food.foodLong} +' cm'"></td>
                            </tr>
                            <tr>
                                <td>宽度</td>
                                <td th:text="${food.width} + ' cm'"></td>
                            </tr>
                            <tr>
                                <td>高度</td>
                                <td th:text="${food.hight} + ' cm'"></td>
                            </tr>
                            <tr>
                                <td>重量</td>
                                <td th:text="${food.weight} + ' g'"></td>
                            </tr>
                            <tr>
                                <td>存储方法</td>
                                <td th:text="${food.foodCondition}"></td>
                            </tr>
                            <tr>
                                <td>生产日期</td>
                                <td th:text="${food.manufacture}"></td>
                            </tr>
                            <tr>
                                <td>保质期</td>
                                <td th:text="${food.guarantee}"></td>
                            </tr>
                            <tr>
                                <td>产地</td>
                                <td th:text="${food.place}"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div><!-- /.tecnical-specs -->
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->

        </div><!-- /.container -->
    </section>
    <section class="flat-iconbox">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/car.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">全球送货</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">订单满$ 100免运费</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/order.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">在线订购服务</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/payment.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">付款</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">安全系统</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/return.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">返回30天</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>
    <div th:insert="~{footer ::#footer}"></div>
    <section class="footer-bottom">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p class="copyright"> All Rights Reserved © Techno Store 2017</p>
                    <p class="btn-scroll">
                        <a href="#" title="">
                            <img src="/images/icons/top.png" alt="">
                        </a>
                    </p>
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.footer-bottom -->

</div><!-- /.boxed -->

<!-- Javascript -->
<script type="text/javascript" src="/javascript/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/tether.min.js"></script>
<script type="text/javascript" src="/javascript/bootstrap.min.js"></script>
<script type="text/javascript" src="/javascript/waypoints.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.circlechart.js"></script>
<script type="text/javascript" src="/javascript/easing.js"></script>
<script type="text/javascript" src="/javascript/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/javascript/owl.carousel.js"></script>
<script type="text/javascript" src="/javascript/smoothscroll.js"></script>
<script type="text/javascript" src="/javascript/jquery-ui.js"></script>
<script type="text/javascript" src="/javascript/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="/javascript/gmap3.min.js"></script>
<script type="text/javascript" src="/javascript/waves.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.countdown.js"></script>
<script type="text/javascript" src="/javascript/main.js"></script>
</body>
</html>
<script type="text/javascript">
    // 减少数量
    $("#sub").click(function () {
        var quantity = $("#quantity").val();
        if (quantity < 2) {
            return ;
        }
        $("#quantity").val(quantity - 1);
    });
    // 添加数量
    $("#add").click(function () {
        var quantity = $("#quantity").val();
        $("#quantity").val(parseInt(quantity) + 1);
    });

    $("#addCart").click(function () {
        var quantity = $("#quantity").val();
        var foodId = $("#foodId").val();
        // 添加到购物车
        window.location.href = '/cart/addCart?foodId=' + foodId +'&quantity=' + quantity;
    });
</script>